Hello and welcome.
In this video we are going to create the javascript functionality for the project.
I have already got a reference to the javascript file inside our hasty email.
Call it call or switch.
Cheers.
So now I have to create the file so I'm going to copy that name and go and click new file and I'm going
to save this inside the same directory as the other two files.
So I'm just going to paste to name calling kolok Switch digits and click C So this file now will be
jaf us creep file.
It's on the bottom right hand corner it says javascript.
I have also already got the code ready for this file here I am add that in and then explain as much
as I like.
So this is the javascript saw from Line want to 4 we've got we are referenced in each of these ideas
which is these ideas here this list items here I am referencing them here use in the documentor get
elemen method and passing in the value of the inside that method.
I'm also attaching a click event on click.
So basically what will happen when you click on each of the button is here.
If you click on the button relating to that it will give you the corresponding function functions have
said that two equals two.
These are the various functions.
For example if you click on this group button it will call the switch gri function which means to switch
the column to grey.
And here if you click on this white button it will call this sweet white function.
Some of these are various functions that would be called in any of this list item.
Click on source here from line 7 to 25 is all we have created the various functions that we are referencing
in this upper part.
So the first function here is the great switch.
Function.
So basically what that does is that when you click on the list item to change the background colour
to grey.
And here you can see the document.
Don't get element by tag name so the tag will be the body as a body attack and the style will be white
or what that means is that a tool changed the background colour of the body tag to agree and also change
any text that is on that page to change it to white.
Okay so that the colours can contrast so this function here is what we are referencing here.
We embedded in grid button is clicked on so we at times on Click event to it.
So the functions are physically the same.
They do the same thing.
This is clie When you click on the white on white button.
Here it all changed the background colour to white and the colour of the text to black.
Same with a switch.
Blue.
It would change the colour to blue background colour to blue and the foreground which is the law of
the text.
Change that to white.
Similar thing to this function.
Here's switch yellow.
Click on the button to change the background colour to yellow and be out for a whole lot of the text
to black.
Some of this function or do similar things your different as the name of the function and also the background
colour or function changes.
So that is basically the javascript functionality sorted and it is to clear farm and save all if you
dont understand any of these options.
I mean this part of the code please to let me know.
So I've got my projects opened.
I'm is going to run the Hayes team file and that should enable us to test their applications so if I
click on this by clicking on this the click method or event will be triggered and it'll call the relevant
function that will switch the background colour to yellow.
I can see that.
I do the same with the blue cause the blue function has to change the background quite angry.
So we've got our application working as designed.
Feel free to add more colours and experiment.
Thanks for watching.
Bye for now.